<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <script src="/js/jquery.min.js"></script>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 420px;
            width: 95%;
            margin:15px;
            /*padding:15px*/
        }

        #r-result {
            width: 100%;
            font-size: 14px;
            line-height: 20px;
        }
    </style>

    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=3.0&ak=e5xGAYG16DgdYYjbA5pfPwhyQtGT3EQD"></script>
    <title>地图展示</title>


</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>首页
            <small>公司分布图</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }"><a href="bmap.html">首页</a>></el-breadcrumb-item>
            <el-breadcrumb-item>公司分布图</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</div>
<div class="box">
    <div style="height:15px">
        &nbsp;
        <a href="address.html">分布图</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="bmap_message.html" style="color: black">详细信息</a>
    </div>
</div>

<div id="allmap"></div>
<div id="r-result">
    <input type="button" value="批量反地址解析+商圈" onclick="bdGEO(0)"/>
    <div id="result"></div>
</div>
</body>
</html>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(114.31, 30.52), 12);  // 初始化地图,设置中心点坐标和地图级别

   /* map.addEventListener("click", function(){
            alert("您点击了地图。");
        }
    );*/

   /* map.addEventListener("dragend", function(e) {
        alert(e.point.lng + ", " + e.point.lat);
        }
    );*/

   /* map.setMapStyleV2({
        styleId: '9df21673b120382248bf93a2d726685b'
    });*/

    map.setCurrentCity("武汉");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放



    //添加缩略图控件
    // map.addControl(new BMap.OverviewMapControl({isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
    //添加缩放平移控件
    // map.addControl(new BMap.NavigationControl());
    //添加比例尺控件
    var opts = {offset: new BMap.Size(100, 25)};
    map.addControl(new BMap.ScaleControl(opts));



    var adds = [];
    axios.post("/setmeal/findAllAddress.do").then((res) => {
        if (res.data.flag) {
            var data = res.data.data; //取出来的是Map集合
            var address = [];
            for (i in data) {
                adds[i] = new BMap.Point(data[i]["longitude"], data[i]["latitude"]);
                address[i] = data[i]["name"]
            }
            for (var i = 0; i < adds.length; i++) {
                var marker = new BMap.Marker(adds[i]);
                map.addOverlay(marker);
                marker.setLabel(new BMap.Label(address[i], {offset: new BMap.Size(20, -10)}));
            }
        } else {
            this.$message.error(res.data.message)
        }
    });

    //批量逆地址解析
    var index = 0;
    var myGeo = new BMap.Geocoder();

    function bdGEO() {
        var pt = adds[index];
        geocodeSearch(pt);
        index++;
    }

    function geocodeSearch(pt) {
        if (index < adds.length - 1) {
            setTimeout(window.bdGEO, 400);
        }
        myGeo.getLocation(pt, function (rs) {
            var addComp = rs.addressComponents;
            document.getElementById("result").innerHTML += index + ". " + adds[index - 1].lng +
                "," + adds[index - 1].lat + "：" + "商圈(" + rs.business + ")  " +
                "结构化数据(" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", "
                + addComp.street + ", " + addComp.streetNumber + ")<br/><br/>";
        });
    }

    //切换城市插件
    var size = new BMap.Size(10, 20);
    map.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: size,
    }));


</script>
